<!DOCTYPE html>
<!--改成jsp，有一个缺点：
1、jsp其实它就是一个java程序
2、jsp->xx。java
3、编译-》xx.class

1、性能慢要翻译和编译


2、公司政策走向，影响这个技术
jsp这个技术“已经过时”了，强依赖与tomcat
现在公司里面不一定用tomcat，特别是政府项目，国产化

-》很老的程序，jsp连都没有

3、前端和后端不好配合
xx.jsp 你的样式很乱，让前端来调

换一种解决方案：当前市场比较流行的后端视图渲染框架
Thymeleaf


-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的好友列表</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<!--<h1 th:text="${tx}"></h1>
<h1>
    用户的姓名是:<span th:text="${user.name}"></span>
</h1>
<h1>
    用户的年龄是:<span th:text="${user.age + 1}"></span>
    <span th:if="${user.age > 18}">已成年</span>
    <span th:unless="${user.age > 18}">未成年</span>
</h1>

<h1 th:text="${list.get(0)}"></h1>

&lt;!&ndash;遍历集合&ndash;&gt;
<p th:each="item:${list}" th:text="${item}"></p>-->


<div class="container-fluid">

    <!-- 查询栏目 -->
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search"  placeholder="根据QQ号搜索" aria-label="Search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据关系搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">好友</option>
                    <option value="1">黑名单</option>
                </select>
                <input class="form-control me-2" type="search"  placeholder="根据好友昵称搜索" aria-label="Search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据性别搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
                <input class="form-control me-2" type="search"  placeholder="根据省份搜索" aria-label="Search">
                <input class="form-control me-2" type="search"  placeholder="根据城市搜索" aria-label="Search">
                <input class="form-control me-2" type="search"  placeholder="根据住址搜索" aria-label="Search">

            </form>
        </div>
    </nav>

    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <form class="d-flex" role="search">
                <select class="form-select" aria-label="Default select example">
                    <option selected>根据状态搜索【全部】</option>
                    <option value="-1">【全部】</option>
                    <option value="0">在线</option>
                    <option value="1">离线</option>
                    <option value="2">隐身</option>
                </select>


                <input class="form-control me-2" type="search"  placeholder="年龄范围" aria-label="Search">-
                <input class="form-control me-2" type="search"  placeholder="年龄范围" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </nav>


    <!-- 列表栏目 -->
    <div class="row" >

        <div class="bd-example">
            <p class="fs-6">我：蝴蝶飞飞 ， 当前等级为：1，我的好友共：49个（包含黑名单）</p>
            <table class="table">
                <thead>
                <tr>
                    <th scope="col">头像</th>
                    <th scope="col">好友QQ号码</th>
                    <th scope="col">我们的关系</th>
                    <th scope="col">好友昵称</th>
                    <th scope="col">性别</th>
                    <th scope="col">年龄</th>
                    <th scope="col">省份</th>
                    <th scope="col">城市</th>
                    <th scope="col">住址</th>
                    <th scope="col">电话</th>
                    <th scope="col">状态</th>
                    <th scope="col">等级</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <th scope="row">
                        <img src="images/男.jpeg" width="30" height="">
                    </th>
                    <th scope="row">{{item.userBean.qqid}}</th>
                    <td>
                        <span class="text-success">好友</span>
                    </td>
                    <td>{{item.baseInfoBean.nickName}}</td>
                    <td>
                        <span v-if="item.baseInfoBean.sex == 0">男</span>
                        <span v-if="item.baseInfoBean.sex == 1">女</span>
                    </td>
                    <td>{{item.baseInfoBean.age}}</td>
                    <td>{{item.baseInfoBean.province}}</td>
                    <td>{{item.baseInfoBean.city}}</td>
                    <td>方城</td>
                    <td>54685421</td>
                    <td>
                        <span class="text-primary">在线</span>
                    </td>
                    <td>☪ </td>
                </tr>
                </tbody>
            </table>
            <nav aria-label="Page navigation example">
                <ul class="pagination justify-content-center">
                    <li class="page-item disabled">
                        <a class="page-link">上一页</a>
                    </li>
                    <li @click="page(n)" v-for="n in pages" class="page-item active">
                        <a class="page-link" href="#">{{n}}</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<!--引入vue的js文件-->
<script src="js/vue.2.7.14.js"></script>

<!-- 引入组件库 -->
<script src="js/index.js"></script>

<!--引入axios-->
<script src="js/axios.min.js"></script>

<script>


    // 创建一个哪个绿色的方块
    // 这个案例，data里面所有的数据，要通过后台去查询
    // 发送异步请求已经学过了，再登录哪个地方： axios.get(xxxx).then()
    //  现在的问题是，这个代码应该写在哪里？？？ 页面渲染完后，去发送请求查询。。。
    // 涉及到一个vue的技术：生命周期
    new Vue({
        el:'.container-fluid',  // el挂载的视图必须是范围内的
        data:{
            name:'张三',
            list:[],
            pages:0
        },
        beforeCreate() { // 1
            console.log("beforeCreate")
        },
        created() { // 2
            console.log("created")
        },
        beforeMount() { // 3
            console.log("beforeMount")
        },
        mounted() { // 4
            console.log("mounted")
            // 发送异步请求！！去获取列表数据
            // 配合vue的框架 axios
            // then成功执行，catch失败执行
            axios.get("/home2").then(resp=> {

                console.log(resp)
                // 分析数据该怎么处理....
                this.list = resp.data.data.records;
                this.pages = resp.data.data.pages;
                console.log("数据加载成功！！")
            }).catch(resp=>{


            });
        },
        methods:{
            page(pageIndex) {

                // 实现分页的
                axios.get("/home2?pageIndex="+pageIndex).then(resp=> {

                    console.log(resp)
                    // 分析数据该怎么处理....
                    this.list = resp.data.data.records;
                    this.pages = resp.data.data.pages;
                    console.log("数据加载成功！！")
                }).catch(resp=>{


                });
            }
        }
    });
</script>
</body>
</html>
